document.addEventListener('DOMContentLoaded', function () {
    // 创建 <style> 标签
    const styleElement = document.createElement('style');

    // 定义 CSS 样式规则
    const css = `
        .error-input::placeholder {
            color: red;
            font-weight: bold;
        }
        .error-input {
            // border: 1px solid red;
            border-radius: 4px 4px 0 0;
            border-bottom: 1px solid red;
            animation: breathe 3s infinite;
            animation-delay: 1s;
        }
        @keyframes breathe {
            0% {
              opacity: 0.5;
              // box-shadow: 0 0 4px red;
              // transform: scale(1);
            }
            50% {
              opacity: 1;
              border-color: red;
              // transform: scale(1);
              // box-shadow: none;
            }
            100% {
              opacity: 0.5;
              // transform: scale(1);
              // box-shadow: 0 0 4px red;
            }
        }
      `;

    // 将 CSS 样式规则添加到 <style> 标签中
    styleElement.appendChild(document.createTextNode(css));

    // 将 <style> 标签添加到 <head> 标签中
    document.head.appendChild(styleElement);
});

// 显示错误提示信息
function showErrorMessage(input, message) {
    // 将当前输入框添加错误样式
    input.placeholder = message;
    input.classList.add('error-input');
}

// 清除错误提示信息
function clearErrorMessage(input) {
    // 移除当前输入框的错误样式
    if (input.classList.contains('error-input')) {
        input.classList.remove('error-input');
    }
}

// 失去焦点事件处理函数
function validateInput(event) {
    const input = event.target; // 获取触发事件的输入框
    const value = input.value; // 获取输入框的值

    // 清除之前的错误提示信息和样式
    clearErrorMessage(input);

    // 非空校验
    if (value.trim() === '') {
        showErrorMessage(input, input.placeholder);
        return false
    } else {
        return true
    }
}

// 失去焦点事件处理函数
function validateOther(event) {
    let value = event.target.value
    // 非空校验
    if (value.trim() === '') {
        alert_error("请输入")
        return false
    } else {
        return true
    }
}

/**
 * 获取输入框焦点触发的非空校验
 * @param validElementId 需要校验的元素id
 */
function onFocusInputNotEmpty(validElementId) {

    const validElement = document.getElementById(validElementId);
    // 绑定失去焦点事件的处理函数
    validElement.addEventListener('blur', validateInput);
}

/**
 * 提交事件输入框非空校验
 * @param elementIds 需要校验的元素id集合
 * @returns {boolean} 校验结果  true:校验通过  false:校验未通过
 */
function onSubmitInputNotEmpty(elementIds) {
    let elementList = [];
    elementIds.forEach(function (elementId) {
        elementList.push(document.getElementById(elementId));
    })

    let valid_result = true;

    elementList.forEach(function (input) {
        // 获取输入框的值
        const value = input.value;
        // 清除之前的错误提示信息和样式
        clearErrorMessage(input);
        // 非空校验
        if (value.trim() === '') {
            showErrorMessage(input, input.placeholder);
            valid_result = false
        }
    });
    return valid_result
}

/**
 * JSON 格式校验
 * @param elementId 元素Id
 * @returns {boolean} 校验结果  true:校验通过  false:校验未通过
 */
function validJson(elementId) {
    let input = document.getElementById(elementId);
    const value = input.value; // 获取输入框的值

    let result = false;
    // 首先校验输入是否为纯数字
    if (/^\d+$/.test(value)) {
        console.log("输入为纯数字");
        result = false;
    } else {
        try {
            JSON.parse(value);
            result = true; // JSON 格式有效
        } catch (error) {
            console.log("json error: ", error);
        }
    }
    console.log("校验结果 --> ", result);
    return result;
}


function onFocusTextareaNotEmpty(validElementId) {
    const validElement = document.getElementById(validElementId);
    // 绑定失去焦点事件的处理函数
    validElement.addEventListener('blur', validateInput);
}

// 失去焦点判断年龄输入框为 18-25 岁
function validateAge(event) {
    const input = event.target; // 获取触发事件的输入框
    const value = input.value; // 获取输入框的值

    // 清除之前的错误提示信息和样式
    clearErrorMessage(input);

    // 年龄校验
    if (value.trim() === '') {
        showErrorMessage(input, input.placeholder);
        return false
    } else if (value < 18 || value > 25) {
        showErrorMessage(input, "请输入18-25岁的年龄");
        return false
    } else {
        return true
    }
}
